<template>
	<view class="">
		<view class="item-con">
			<view class="item">
				<view class="item-cell flex-row justify-between">
					<text>救援类型</text>
					<view class="flex-row fill" @tap="showPicker = true">
						<input class="input fill" disabled type="text" v-model="info.type" value="" placeholder="请选择" />
						<u-icon name="arrow-right" size="26" color="#999"></u-icon>
					</view>
				</view>
				<view class="item-cell flex-row justify-between">
					<text>选择车辆</text>
					<view class="flex-row fill" @tap="navTo(`/pages/myself/cart?souce=1&id=${info.carId}`)">
						<input class="input fill" v-model="cartName" disabled type="text" value="" placeholder="请选择" />
						<u-icon name="arrow-right" size="26" color="#999"></u-icon>
					</view>
				</view>
				<view class="item-cell flex-row justify-between">
					<text>救援位置</text>
					<view class="flex-row fill">
						<view class="fill" style="padding-left:40rpx;">{{ info.address }}</view>
						<u-icon name="arrow-right" size="26" color="#999"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 0 30rpx 30rpx 30rpx;">
			<view class="item">
				<view class="item-cell flex-row justify-between">
					<text>联系人</text>
					<view class="flex-row fill"><input v-model="info.userName" class="input fill" type="text" value="" placeholder="请输入" /></view>
				</view>
				<view class="item-cell flex-row justify-between">
					<text>联系电话</text>
					<view class="flex-row fill"><input class="input fill" v-model="info.userPhone" type="number" value="" placeholder="请输入" /></view>
				</view>
				<view class="item-cell flex-row justify-between">
					<text>问题描述</text>
					<view class="flex-row fill"><input class="input fill" v-model="info.discribeQuestion" type="text" value="" placeholder="请输入" /></view>
				</view>
				<view class="item-cell flex-row justify-between">
					<view class="">
						<text>图片</text>
						<text style="font-size: 24rpx;">(可选,3张)</text>
					</view>
				</view>
				<view class=""><mix-upload-image :length="3" ref="mixUploadImage"></mix-upload-image></view>
			</view>
		</view>
		<!-- <view style="padding: 0 30rpx 30rpx 30rpx;">
			<view class="item flex-row justify-between">
				<view class="item-cell">
					<view>
						<text style="margin-right: 20rpx;">
							是否需要移动电源车
							<text style="color: #FF4040;">(￥{{ money }})</text>
						</text>
						<u-icon name="question-circle-fill" color="#ccc" size="32" @tap="getContent"></u-icon>
					</view>
				</view>
				<switch style="transform: scale(.7);" @change="switchChange"></switch>
			</view>
		</view> -->
		<view class="flex-row justify-center">
			<!-- <view class=""> -->
			<u-icon name="checkmark-circle" color="#246697"></u-icon>
			<view class="" style="margin-left: 20rpx;">
				我已阅读并同意
				<text style="color:#246697;" @tap="navTo('/pages/public/xieyi')">《xxx救援服务协议》</text>
			</view>
			<!-- </view> -->
		</view>
		<view class="footer-btn flex-row justify-center" style="padding: 30rpx 0;"><view class="btn" hover-class="hover-opacity" @tap="submit">提交</view></view>
		<mix-loading v-if="isLoading"></mix-loading>
		<u-picker mode="selector" v-model="showPicker" :range="graList" rangeKey="name" @confirm="selectConfirm"></u-picker>
		<u-popup v-model="show" mode="center" :closeable="true" borderRadius="30">
			<view class="content">
				<view class="content-title">电源车收费说明</view>
				<view class="content-c">{{ content }}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { checkStr } from '@/common/js/util.js';
import servceMixins from './servce.js';
export default {
	mixins: [servceMixins],
	data() {
		return {
			graList: [],
			money: '',
			showPicker: false,
			show: false,
			servceInfo: {},
			content: '',
			cartName: '',
			info: {
				address: '',
				carId: '',
				type: '',
				userName: '',
				userPhone: '',
				discribeQuestion: '',
				needCar: 0,
				needPay: 0
			}
		};
	},
	onLoad() {
		let item = getApp().globalData.serverInfo;
		this.info.address = item.address;
		this.getClassList();
		this.getSetting();
	},
	methods: {
		setCartItem(item) {
			if (item.id) {
				this.info.carId = item.id;
				this.cartName = item.name + item.name1 + item.name2;
			} else {
				this.info.carId = '';
				this.cartName = '';
			}
		},
		async getContent() {
			if (this.content != '') {
				this.show = true;
				return;
			}
			const res = await this.$request('content/text', { type: 6 }, { showLoading: true });
			if (res.result == 0) {
				this.content = res.data.content;
				this.show = true;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		switchChange(e) {
			e.detail.value ? ((this.info.needCar = 1), (this.info.needPay = this.money)) : ((this.info.needCar = 0), (this.info.needPay = 0));
		},
		selectConfirm(array) {
			let index = array[0];
			this.info.type = this.graList[index].name;
		},
		async submit() {
			const { address, carId, type, userName, userPhone, discribeQuestion, needCar, needPay } = this.info;
			let pic = this.$refs.mixUploadImage.imageList.map(item => item.url);
			if (address == '') {
				this.$util.msg('请选择救援地址');
				return;
			}
			if (type == '') {
				this.$util.msg('请选择救援类型');
				return;
			}
			if (carId == '') {
				this.$util.msg('请选择救援车辆');
				return;
			}
			if (discribeQuestion == '') {
				this.$util.msg('请输入问题描述');
				return;
			}
			if (userName == '') {
				this.$util.msg('请输入联系人');
				return;
			}
			if (userPhone == '') {
				this.$util.msg('请输入联系电话');
				return;
			}
			if (!checkStr(userPhone, 'mobile')) {
				this.$util.msg('联系电话格式错误');
				return;
			}
			const data = {
				uid: uni.getStorageSync('uid'),
				pic: pic.join('|'),
				address,
				carId,
				type,
				userName,
				userPhone,
				discribeQuestion,
				needCar,
				needPay
			};
			const res = await this.$request('rescue/apply', data, { showLoading: true });
			console.log(res);
			if (res.result == 0) {
				if (res.data.needCar == 1) {
					res.data.money = res.data.needPay;
					this.payByWx(res.data);
				} else {
					uni.redirectTo({
						url: '/pages_servce/servce/success'
					});
				}
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async getClassList() {
			const res = await this.$request('rescue/type', {}, { showLoading: true });
			if (res.result == 0) {
				this.graList = res.data;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async getSetting() {
			const res = await this.$request('setting/get-setting', {}, { showLoading: true });
			if (res.result == 0) {
				this.money = res.atConfig.field;
			} else {
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.content-title {
	text-align: center;
	color: #000000;
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
}
.content-c {
	font-size: 26rpx;
	font-weight: 500;
	color: #666666;
	padding-top: 30rpx;
	overflow-y: scroll;
	max-height: 300rpx;
}
.item-con {
	padding: 30rpx;
}
.item {
	padding: 20rpx;
	border-radius: 20rpx;
	background: #ffffff;
}
.item-cell {
	padding: 20rpx 0 10rpx;
}
.input {
	line-height: 70rpx;
	text-align: right;
	// width: 100%;
}
.content {
	width: 600rpx;
	padding: 30rpx;
}
.btn {
	width: 704rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: $uni-color-bg;
	border-radius: 44rpx;
	font-size: 30rpx;
	color: #ffffff;
}
</style>
